﻿@using SquishIt.Framework
@using SquishIt.Mvc
@using WebExtras.DemoApp.App_Start

@model WebExtras.DemoApp.Models.Core.FlotViewModel

@{
  ViewBag.Title = "jQuery Flot";
}

@section scripts
{
  @Bundle.JavaScript().MvcRenderCachedAssetTag(ContentBundle.JSFlot.GetStringValue())
}

<h3 class="keep-center">jQuery Flot Bindings</h3>

<div class="col-group">
  <div class="col-6">
    <div class="col-12">
      <div class="col-3">
        <strong>Assembly</strong>
      </div>
      <div class="col-4">
        WebExtras.dll
      </div>
    </div>
    <div class="col-12">
      <div class="col-3">
        <strong>Namespace</strong>
      </div>
      <div class="col-4">
        WebExtras.JQFlot
      </div>
    </div>
  </div>
  <div class="col-offset-7">
    <div class="col-4">
      <strong>Dependancies</strong>
    </div>
    <div class="col-4">
      <ul class="dependancies">
        <li>jquery.flot.js</li>
        <li>jquery.flot.curvedlines.js</li>
        <li>jquery.flot.dashes.js</li>
        <li>jquery.flot.axislabels.js</li>
        <li>jquery.flot.pie.js</li>
      </ul>
    </div>
  </div>
</div>
<div>
  Steps involved in creating a Flot graph
    <ul>
      <li>Creating the graph options</li>
      <li>Creating graph data</li>
      <li>Creating the graph series</li>
      <li>Rendering the graph</li>
    </ul>
</div>
<ul class="ui-nav">
  <li>@Html.ActionLink("Line Graph", MVC.JQueryUI.Core.Flot(0))</li>
  <li>@Html.ActionLink("Dashed Line Graph", MVC.JQueryUI.Core.Flot(1))</li>
  <li>@Html.ActionLink("Curved Line Graph", MVC.JQueryUI.Core.Flot(2))</li>
  <li>@Html.ActionLink("Bar Graph", MVC.JQueryUI.Core.Flot(3))</li>
  <li>@Html.ActionLink("Pie Graph", MVC.JQueryUI.Core.Flot(4))</li>
  <li>@Html.ActionLink("Axis Labels", MVC.JQueryUI.Core.Flot(5))</li>
  <li>@Html.ActionLink("Custom Formatters", MVC.JQueryUI.Core.Flot(6))</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
    $('.ui-nav li:eq(' + @Model.DisplayMode + ')').addClass('active');
  });
</script>

@switch (Model.DisplayMode)
{
  case 6:
  @Html.Partial(MVC.Core.Views._CustomFlotFormatters, Model.Chart)
    break;

  case 5:
  @Html.Partial(MVC.JQueryUI.Core.Views._AxisLabels)
    break;

  case 4:
  @Html.Partial(MVC.Core.Views._PieGraph, Model.Chart)
    break;

  case 3:
  @Html.Partial(MVC.Core.Views._BarGraph, Model.Chart)
    break;

  case 2:
  @Html.Partial(MVC.Core.Views._CurvedLineGraph, Model.Chart)
    break;

  case 1:
  @Html.Partial(MVC.Core.Views._DashedGraph, Model.Chart)
    break;

  case 0:
  default:
  @Html.Partial(MVC.Core.Views._LineGraph, Model.Chart)
    break;
}